<template>
  <div id="app">
    <div>
      <el-badge :value="noticeNumber" :max="99" class="custom-badge">
        <i class="el-icon-message-solid" @click="openNoticeDialog"></i>
      </el-badge>
    </div>
    <div>
      <el-dialog
        title="消息通知"
        :visible.sync="dialogDetailVisible"
        width="30%"
        :before-close="handleCloseDetail"
        :append-to-body="true"
      >
        <!--表格渲染-->
        <el-table ref="table" v-loading="loading" :data="noticeList" size="small" style="width: 100%;">
          <el-table-column prop="content" label="内容" show-overflow-tooltip/>
          <el-table-column prop="manageStatus" label="状态">
            <template slot-scope="scope">
              <!-- 根据不同的值显示不同的内容 -->
              <span v-if="scope.row.manageStatus === 1">未读</span>
              <span v-else-if="scope.row.manageStatus === 2">已读</span>
              <span v-else />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-button size="small" v-if="scope.row.manageStatus == 1" @click="handleOrderMsg(scope.row.id)">已读</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import message from '@/api/system/message'
export default {
  data() {
    return {
      noticeNumber: null,
      dialogDetailVisible: false,
      noticeList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    openNoticeDialog() {
      this.dialogDetailVisible = true
      this.getOrderMsgs(this.currentPage, this.pageSize)
    },
    handleCloseDetail() {
      this.dialogDetailVisible = false
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getOrderMsgs(1, val)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getOrderMsgs(val, this.pageSize)
    },
    getOrderMsgs(currentPage, pageSize) {
      this.loading = true
      message.getOrderMsg(currentPage, pageSize).then(data => {
        if (data && data.data) {
          this.noticeList = data.data.records
          this.total = data.data.total
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getOrderNumber() {
      message.getOrderMsgCount().then(data => {
        if (data && data.data) {
          this.noticeNumber = data.data
        }
      })
    },
    handleOrderMsg(id) {
      message.handleOrderMsg(id).then(data => {
        if (data) {
          this.getOrderMsgs(this.currentPage, this.pageSize)
          this.getOrderNumber()
        }
      })
    },
    // 轮询
    fetchMessages() {
      this.getOrderNumber()
    },
    startPolling() {
      this.pollingInterval = setInterval(this.fetchMessages, 1000 * 30)
    },
    stopPolling() {
      clearInterval(this.pollingInterval)
      this.pollingInterval = null
    }
  },
  mounted() {
    this.getOrderNumber()
    // 正式环境开启轮询
    if (process.env.NODE_ENV === 'production') {
      this.startPolling()
    }
  },
  beforeDestroy() {
    if (process.env.NODE_ENV === 'production') {
      this.stopPolling()
    }
  }
}
</script>
<style scoped>
/* Vue 3 和 Element Plus 使用 ::v-deep */
::v-deep .custom-badge .el-badge__content {
  transform: translate(110%, 10%); /* 根据需要调整偏移量 */
}
.custom-badge {
  margin-right: 20px;
}
</style>
